<template>
    <div>
      <v-layout row justify-center>
        <v-flex md10 lg9 sm10 xl8>
      <v-card class="topinout">
        <v-layout>
        <v-flex>
           <div class="title">热门电影</div>
           <div class="body-2">更多</div>
        </v-flex>
      </v-layout>
        <v-container grid-list-xl fluid>
            <v-layout row wrap>
              <v-flex
                v-for="n in test"
                :key="n.vod_name"
                xs4
                md2
                sm3
                lg2
                align-center
              >
              <v-hover>
                <v-card flat class="d-flex" slot-scope="{ hover }" :class="`elevation-${hover ? 12 : 2}`">
                 <router-link :to="{path:'movie'}">
                  <v-img
                    :src="`http://80.240.31.53/`+n.vod_pic"
                    :lazy-src="`http://80.240.31.53/`+n.vod_pic"
                    aspect-ratio="0.7"
                  >
                  </v-img>
                 </router-link>
                </v-card>
                </a>
                </v-hover>
                <div class="titless">
                    <i class="caption">{{n.vod_name}}</i>
                </div>
                <div class="titless">
                    <i class="captions">{{n.vod_actor}}</i>
                </div>
              </v-flex>
            </v-layout>
          </v-container>
          </v-card>
               </v-flex>
  </v-layout>
    <v-layout row justify-center>
      <v-flex md10 lg9 sm10 xl8>
    <v-card class="topinout">
      <v-layout>
      <v-flex>
         <div class="title">热门电视剧</div>
         <div class="body-2">更多</div>
      </v-flex>
    </v-layout>
      <v-container grid-list-xl fluid class="mo1">
          <v-layout row wrap>
            <v-flex
              v-for="n in test"
              :key="n.vod_name"
              xs4
              md2
              sm3
              lg2
              class="carde"
              align-center
            >
            <v-hover>
              <v-card flat class="d-flex" slot-scope="{ hover }" :class="`elevation-${hover ? 12 : 2}`">
                <v-img
                  :src="`http://80.240.31.53/`+n.vod_pic"
                  aspect-ratio="0.7"
                >
                </v-img>
              </v-card>
              </v-hover>
              <div class="titless">
                  <i class="caption">{{n.vod_name}}</i>
              </div>
              <div class="titless">
                  <i class="captions">{{n.vod_actor}}</i>
              </div>
            </v-flex>
          </v-layout>
        </v-container>
        </v-card>
             </v-flex>
</v-layout>
    </div>
</template>
<script>
export default {
    name:"ShowIndex",
    data(){
      return{
        test:[]
      }
    },
    created(){
      var vm = this
      this.$http
      .get('http://blog.localhost/')
      .then(function (response) {
        vm.test = response.data.data
        console.log(vm.test)
      })
    }
}
</script>


<style scoped>
.topinout{
  margin-top: 20px;
}
.title{
  float: left;
  margin:10px 0 -5px 20px;
}
.body-2{
  float: right;
  margin:10px 22px -5px 20px;
}
.titless{
  margin-top: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.captions{
  font-weight:300;
  white-space: nowrap;
}
.carde{
  margin-top:-15px;
}
</style>
